<template>
  <ContainerGroup>
    <Container height="fill" display="flexY">
      <div class="block-box">
        <div class="block-label">删除审核流程设置</div>
        <div class="block-right">
          <div v-for="(item,index) in userList" :key="index" class="person-box">
            <div class="person-item">{{ item.realName }}</div>
          </div>
          <div class="btn" @click="handlePlus">+</div>
        </div>
      </div>
      <Drawer
        title="添加"
        :visible="isShow"
        :header-color="'#e7ecf8'"
        width="40%"
        :footer-btns="[
          {
            text: '确定',
            type: 'primary',
            trigger: 'confirm',
          },
          {
            text: '取消',
            type: 'info',
            loading: btnLoading,
            trigger: 'cancel',
          }
        ]"
        @cancel="isShow = false"
        @confirm="handleSave"
      >
        <Container v-if="isShow" height="fill" display="flexY">
          <FilterForm
            ref="filterForm"
            style="margin-bottom:10px;"
            :elements="bottomFilters"
            @submit="handleSearch"
            @reset="handlerReset"
          />
          <Table
            :columns="tableColumns"
            :loading="tableLoading"
            :data="tableData"
            :highlight-current-row="true"
            :pagination="{
              total: total,
              current: currentPage,
              pageSize: pageSize,
            }"
            @rowClick="handleRowClick"
            @paginationChange="pageChange"
          />
        </Container>
      </Drawer>
    </Container>
  </ContainerGroup>
</template>
<script>
import {
  getAllUser,
  insertZxAuth,
  getAllHandleUser
} from '@/apis/specialFunds/systermSetting'
export default {
  name: 'ApprovalProcess', // 审批流程
  data() {
    return {
      userList: [],
      btnLoading: false,
      isShow: false,
      bottomFilters: [
        {
          key: 'selectAll',
          type: 'input',
          label: '',
          placeholder: '请输入姓名/科室/角色/职务',
          value: '',
          width: 220
        }
      ],
      tableColumns: [
        {
          title: '账号',
          dataIndex: 'userName'
        },
        {
          title: '姓名',
          dataIndex: 'realName'
        },
        {
          title: '科室',
          dataIndex: 'deptName'
        },
        {
          title: '角色',
          dataIndex: 'role'
        },
        {
          title: '职务',
          dataIndex: 'appointment'
        }
      ],
      total: 0,
      pageSize: 10,
      currentPage: 1,
      tableLoading: false,
      tableData: [],
      newCondition: {},
      currentRow: null
    }
  },
  created() {
    this.getNewUser()
  },
  methods: {
    handleRowClick(row) {
      this.currentRow = row
    },
    getNewUser() {
      getAllHandleUser().then(res => {
        if (res.data.code === 200) {
          this.userList = res.data.data
        } else {
          this.$message.error(res.data.message)
        }
      })
    },
    handleSave() {
      if (!this.currentRow) {
        this.$message.warning('请选择要添加的审批人')
        return
      }
      const param = {
        appointment: this.currentRow?.appointment,
        deptName: this.currentRow?.deptName,
        realName: this.currentRow?.realName,
        role: this.currentRow?.role,
        userName: this.currentRow?.userName,
        userid: this.currentRow?.userid
      }
      this.btnLoading = true
      insertZxAuth(param).then(res => {
        this.btnLoading = false
        this.isShow = false
        if (res.data.code === 200) {
          this.$message.success(res.data.message)
          this.getNewUser()
        } else {
          this.$message.error(res.data.message)
        }
      })
    },
    handlePlus() {
      this.currentRow = null
      this.isShow = true
    },
    handlerReset(val) {
      this.handleSearch()
    },
    handleSearch(value) {
      this.newCondition = value
      this.currentPage = 1
      this.getData()
    },
    getData() {
      const params = {
        selectAll: this.newCondition?.selectAll,
        pageNo: this.currentPage,
        pageSize: this.pageSize
      }
      this.tableLoading = true
      getAllUser(params)
        .then(res => {
          this.tableLoading = false
          if (res.data.code === 200) {
            this.tableData = res.data.data.list
            this.total = res.data.data.total
          } else {
            this.$message.error(res.data.message)
          }
        })
        .catch(() => {
          this.tableLoading = false
        })
    },
    pageChange(payload) {
      this.currentPage = payload.current
      this.pageSize = payload.pageSize
      this.getData()
    }
  }
}
</script>
<style lang="less" scoped>
.block-box {
  border: 1px solid #ececec;
  border-radius: 4px 4px;
  display: flex;
  .block-label {
    width: 220px;
    border-right: 1px solid #ececec;
    padding: 0px 5px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
  }
  .block-right {
    padding: 10px 5px;
    box-sizing: border-box;
    flex: 1;
    display: flex;
    .person-box {
      .person-item {
        border: 1px solid #ececec;
        text-align: center;
        width: 80px;
        border-radius: 4px;
        margin-right: 8px;
        height: 25px;
      }
    }
    .btn {
      border: 1px solid #217dfa;
      width: 60px;
      height: 25px;
      text-align: center;
      cursor: pointer;
      color: #217dfa;
      border-radius: 4px;
    }
  }
}
</style>
